<template>
    <h1 class="text-center">{{ruleForm.title}}</h1>
    <p class="text-right"><el-text class="cp" @click="isPrint = true">打印</el-text></p>
    <h2 class="text-center">成本、费用、盈亏分析表</h2>
    <el-table :data="tableData" border show-summary style="width: 100%;">
        <el-table-column prop="title" label="名称" show-overflow-tooltip />
        <el-table-column prop="price" label="金额" show-overflow-tooltip />
        <el-table-column prop="proportion" label="占比" show-overflow-tooltip />
        <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
    </el-table>

    <el-dialog v-model="isPrint" width="900px">
        <div id="print" class="print">
            <h1 class="text-center">成本、费用、盈亏分析表</h1>
            <el-table :data="tableData" border show-summary style="width: 100%;height: auto !important;">
                <el-table-column prop="title" label="名称" show-overflow-tooltip />
                <el-table-column prop="price" label="金额" show-overflow-tooltip />
                <el-table-column prop="proportion" label="占比" show-overflow-tooltip />
                <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
            </el-table>
        </div>
        <div class="text-center mt30">
            <el-button @click="printElement('print')"> 打印 </el-button>
            <el-button type="info" @click="isPrint = false"> 取消 </el-button>
        </div>
    </el-dialog>
    
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import http from '../../../../util/request';
import { PrinterService } from '../../../../util/printer'
const printer = new PrinterService()
const isPrint = ref(false)
interface RuleForm {
    title: string
    price:number
    proportion:number
    remarks:string
}

const ruleForm = ref<RuleForm>({
    title: '',
    price:0,
    proportion:0,
    remarks:'/'
})

const tableData = ref<RuleForm[]>([
    // {title: '合同金额（一般计税）', price:0, proportion:0, remarks:'/'},
    // {title: '审定金额（一般计税）', price:0, proportion:0, remarks:'/'},
])

const getData = () => {
    http.post('/statistics',{}).then((response:any)=>{
        tableData.value = response.data.data
    })
}

const printElement = (elementId:string) => {
    if(elementId){
        printer.printElement(elementId, { title: '　' })
        return;
    }
}

onMounted(()=>{
    getData()
})
</script>
<style scoped>
.el-table{border: 1px solid #bbbbbb;margin-top: 5px;}
:deep(.custom-header-table .el-table__header th) {
  font-weight: 300 !important; /* 加粗 */
  color: #000000;
}
el-table .cell {font-size: .7rem !important;padding: 0px 3px;}
.el-text{font-size: .8rem !important;}

.el-table .el-table__header-wrapper th,
.el-table .el-table__body-wrapper td {
  border-color: #bbbbbb !important;
}
</style>
